<template>
  <div class="sidebar-container">
    <!-- 左侧导航栏 -->
    <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" :collapse="isCollapse" style="height:100%;" @open="handleOpen" @close="handleClose">
      <el-submenu index="1" v-if="!isCollapse">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="2" v-if="!isCollapse">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>导航二</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="2-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
    </el-menu>
    <!-- 导航栏拉伸条 -->
    <div class="resize-bar" v-show="!isCollapse" @mousedown="startResize"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1-1',
      isCollapse: false,
      minWidth: 200, // 左侧导航栏的最小宽度
      maxWidth: 500, // 左侧导航栏的最大宽度
      startX: 0, // 鼠标按下时X轴坐标
      startWidth: 0, // 拉伸条左侧元素的初始宽度
      leftContainer: null // 左侧导航栏容器
    }
  },
  mounted() {
    this.leftContainer = document.querySelector('.sidebar-container')
    document.addEventListener('mousemove', this.resize)
    document.addEventListener('mouseup', this.stopResize)
  },
  beforeDestroy() {
    document.removeEventListener('mousemove', this.resize)
    document.removeEventListener('mouseup', this.stopResize)
  },
  methods: {
    handleOpen(index, indexPath) {},
    handleClose(index, indexPath) {},
    startResize(e) {
      this.startX = e.clientX
      this.startWidth = this.leftContainer.offsetWidth
    },
    resize(e) {
      if (e.buttons !== 1) {
        return
      }
      const offset = e.clientX - this.startX
      let newWidth = this.startWidth + offset
      // 检查是否超出最小或最大宽度限制
      if (newWidth < this.minWidth) {
        newWidth = this.minWidth
      } else if (newWidth > this.maxWidth) {
        newWidth = this.maxWidth
      }
      // 设置新的宽度
      this.leftContainer.style.width = newWidth + 'px'
    },
    stopResize() {}
  }
}
</script>
<style scoped>
.sidebar-container {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.el-menu-vertical-demo {
  width: 100%;
}
.resize-bar {
   position: absolute;
   top: 0;
   right: -5px;
   width: 10px;
   height: 100%;
   cursor: col-resize;
   background-color: #e5e9f2;
 }
.el-submenu__title {
  display: flex;
  align-items: center;
}

.el-menu-vertical-demo:not(.el-menu--collapse) .el-menu-item-group__title,
.el-menu-vertical-demo:not(.el-menu--collapse) .el-submenu__title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  padding: 12px 20px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) .el-menu-item {
  font-size: 13px;
  color: #666;
  padding: 8px 50px 8px 40px;
}
</style>
